<template>
  <q-dialog v-model="open">
    <q-card class="box">
      <q-card-section class="row items-center q-pt-sm">
        <q-space />
        <q-btn icon="clear" flat round dense v-close-popup style="color: #fff" />
      </q-card-section>
      <div class="flex row justify-between info">
        <div class="vdo"></div>
        <div class="vdo"></div>
      </div>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useEmitter } from 'src/emitter';

export default defineComponent({
  name: 'terminal-crane-video',

  setup() {
    const open = ref(false);

    useEmitter('inform', async payload => {
      if (payload.name !== 'terminal-video') {
        return;
      }
      open.value = payload.value;
    });

    return {
      open,
    };
  },
});
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  width: 1610px;
  min-width: 1610px;
  height: 831px;
  background-color: transparent;
  background-image: url('src/assets/terminal/video.png');
  background-size: 100% 100%;
  .info {
    position: absolute;
    width: 1500px;
    height: 615px;
    top: 110px;
    left: 0;
    right: 0;
    margin: auto;
    .vdo {
      width: 720px;
      height: 360px;
      background-image: url('src/assets/terminal/video_bg.png');
      background-size: 100% 100%;
    }
  }
}
</style>
